1 00:00:00,470 --> 00:00:01,460 Hey there. 2 00:00:01,460 --> 00:00:09,350 In this lecture, we're going to be taking a look at another unique GUI object called a canvas group. 3 00:00:09,500 --> 00:00:12,680 Let me go ahead and insert one into my screen GUI. 4 00:00:12,800 --> 00:00:19,760 And the purpose of a canvas group is to render multiple different GUI objects together with a universally 5 00:00:19,760 --> 00:00:22,160 applied color and transparency. 6 00:00:22,190 --> 00:00:26,060 Different GUI objects have different transparency properties. 7 00:00:26,060 --> 00:00:32,210 For example, with a text label, the text label has a background transparency property, but it also 8 00:00:32,210 --> 00:00:37,430 has a text transparency and it also has a text stroke transparency. 9 00:00:37,460 --> 00:00:42,620 With a regular frame, this one's only going to have a background transparency. 10 00:00:42,620 --> 00:00:48,590 And if you have, let's say a UI stroke applied to a frame, this is going to have another transparency 11 00:00:48,590 --> 00:00:50,990 property just called transparency. 12 00:00:50,990 --> 00:00:58,220 These different names can make it very difficult to fade in or fade out an entire GUI at once. 13 00:00:58,220 --> 00:01:00,830 So this is what the canvas group solves. 14 00:01:00,830 --> 00:01:02,960 Whenever you have any GUI objects. 15 00:01:02,960 --> 00:01:08,480 As a descendant of the canvas group, it's going to apply the group color and the group transparency 16 00:01:08,480 --> 00:01:10,520 to all of the objects at once. 17 00:01:10,520 --> 00:01:15,920 This means you can change the transparency of multiple GUI objects from one property. 18 00:01:16,130 --> 00:01:18,800 Let's go ahead and take a look at the canvas group. 19 00:01:18,800 --> 00:01:24,110 It's basically just another frame, so let me move it here into the center of the screen. 20 00:01:24,110 --> 00:01:29,180 And as you can see we have background colors, a background transparency size position. 21 00:01:29,180 --> 00:01:35,060 It's basically just another frame, but with two other extra properties to manipulate the group color 22 00:01:35,060 --> 00:01:36,920 and the group transparency. 23 00:01:37,980 --> 00:01:42,810 So let me go ahead and convert it to scale and then let me scale up my canvas group. 24 00:01:43,610 --> 00:01:46,970 And let me go ahead and find where my frame went. 25 00:01:47,000 --> 00:01:50,360 Actually, let me change the color to like a bright green or something like that. 26 00:01:50,390 --> 00:01:51,650 Where is my frame? 27 00:01:51,680 --> 00:01:54,110 My frame is somewhere. 28 00:01:54,530 --> 00:02:03,410 Maybe I'll reposition it because the canvas group automatically cuts all of the descendants. 29 00:02:03,410 --> 00:02:08,240 So canvas groups will automatically clip all of the descendants and you can't disable it. 30 00:02:08,240 --> 00:02:10,100 So just something to keep in mind. 31 00:02:10,100 --> 00:02:14,720 They will always clip descendants no matter what, and let me find my text label as well. 32 00:02:15,020 --> 00:02:19,670 Let me go ahead and put it somewhere back inside of the bounds of my canvas group. 33 00:02:19,670 --> 00:02:23,060 Okay, here's my text label, here's my frame. 34 00:02:23,060 --> 00:02:25,910 Let me go ahead and just manipulate my text label a bit. 35 00:02:25,910 --> 00:02:28,340 Make it like a blue color. 36 00:02:28,760 --> 00:02:36,560 We'll scale up the text and we'll just say something like hello there, change up the font, we'll do 37 00:02:36,560 --> 00:02:37,460 something like that. 38 00:02:37,460 --> 00:02:38,390 Scale it around. 39 00:02:38,390 --> 00:02:38,990 Oops. 40 00:02:39,960 --> 00:02:41,580 We scale this bad boy up. 41 00:02:43,820 --> 00:02:45,410 Okay, cool. 42 00:02:45,500 --> 00:02:47,870 Scale this guy up or something. 43 00:02:47,900 --> 00:02:51,680 Do that and then let's increase the thickness of that. 44 00:02:51,710 --> 00:02:54,050 Let's make this, I don't know, pink. 45 00:02:54,080 --> 00:02:54,860 We'll do something like that. 46 00:02:54,860 --> 00:02:55,430 Okay. 47 00:02:55,550 --> 00:02:58,760 Here we have a bunch of elements inside of our canvas groups. 48 00:02:58,790 --> 00:03:03,590 Now, traditionally, if we didn't have a canvas group, we would have to go through each one of these 49 00:03:03,620 --> 00:03:04,730 objects one by one. 50 00:03:04,730 --> 00:03:07,970 Find out which one of these properties is the transparency property. 51 00:03:07,970 --> 00:03:12,020 So you'd probably have to have a bunch of if statements checked to see if the object is a text label, 52 00:03:12,020 --> 00:03:17,600 or if it's a frame, or if it's a stroke, and then apply a different transparency property to tween. 53 00:03:17,600 --> 00:03:23,630 But with a canvas group, we can literally adjust the group transparency property to fade out the entire 54 00:03:23,630 --> 00:03:24,560 GUI at once. 55 00:03:24,560 --> 00:03:30,500 So as I increase this, you can see that all of the elements in my GUI are being faded out together. 56 00:03:30,500 --> 00:03:35,690 There's no need for me to go in and mess around with all the individual different transparency properties 57 00:03:35,690 --> 00:03:37,670 for each GUI object. 58 00:03:38,120 --> 00:03:40,310 We can also alter the color of the group. 59 00:03:40,310 --> 00:03:45,920 So if I wanted to apply a universal color to all of the objects in my group, I can do that from this 60 00:03:45,920 --> 00:03:47,060 property as well. 61 00:03:47,060 --> 00:03:51,350 So as you can see, the colors are mixing together to make some different and weird colors. 62 00:03:51,350 --> 00:03:55,220 If you want to keep them with their regular colors, you just have this at white. 63 00:03:55,990 --> 00:03:58,030 For canvas groups are pretty simple. 64 00:03:58,030 --> 00:04:03,520 It's just a frame that allows you to change the transparency and color of the group all at once. 65 00:04:03,520 --> 00:04:05,410 That's basically all there is to it. 66 00:04:05,410 --> 00:04:07,180 So that's all for me in this lecture. 67 00:04:07,180 --> 00:04:12,340 And in the next lecture, I have a challenge for you to practice some of the information you've just 68 00:04:12,340 --> 00:04:13,780 learned in this section. 69 00:04:13,780 --> 00:04:14,920 See you there.